<!DOCTYPE html>
<html>

<head>
    <title>欢迎登录</title>
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <style>
        .vcodStyle {
            border-color: red;
        }
    </style>
</head>

<body>
    <div class="container" style="margin-top:180px; ">

        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-primary">
                <div class="panel-heading">登录学生管理系统</div>
                <div class="panel-body">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label for="uname" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="username" id="usernameId" placeholder="请输入用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="pwd" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" name="password" id="passwordId" placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="pwd" class="col-sm-2 control-label">验证码</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="vcode" id="vcodeId" placeholder="请输入验证码">
                            </div>
                            <div class="col-sm-3">
                                <img id="vcodeimg" src="/account/vcode">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button onclick="login()" class="btn btn-default">登录</button> &nbsp;&nbsp;
                                <input onclick="register();" type="button" value="注册" class="btn btn-danger">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    //点击验证码图片，重新请求验证码,利用src天然跨域性，改变他的值，但需要加上一个无用参数，避免它在本地缓存读取数据
    $('#vcodeimg').click(function () {
        $(this).attr('src', '/account/vcode?vid=' + Date.now());
    })

    // 点击登录提交,行内已经注册了点击事件
    function login() {
        //获取输入框的内容
        var username = $('#usernameId').val();
        var password = $('#passwordId').val();
        var vcode = $('#vcodeId').val();
        //将其发送到服务器中
        $.post({
            url: '/account/login',
            data: {
                username: username,
                password: password,
                vcodeId: vcode
            },
            success: function (data) {
                console.log(data)
                if (JSON.parse(data).status == 0) {
                    console.log(1)
                    $('#vcodeimg').attr('src', '/account/vcode?vid=' + Date.now());
                    $('#vcodeId').addClass('vcodStyle').focus(function () {
                        $(this).removeClass('vcodStyle').val('');
                    });
                }else if(JSON.parse(data).status == 2){
                        alert(data.message)
                }else if(JSON.parse(data).status == 1){
                    window.location.href = '/studentmanager/list'
                }
            },
            error: function (err) {
                console.log(err);
            }
        })
    }
</script>

</html>